<template>
	<view class="page">
		<!-- 余额卡片 -->
		<view class="balance-card">
			<text class="balance-title">账户余额</text>
			<view class="balance-amount">
				<text class="currency">¥</text>
				<text class="amount">{{ balance }}</text>
			</view>
			<view class="balance-actions">
				<view class="action-btn" @click="showRechargeModal">
					<image src="/static/svg/add.svg" class="action-icon" />
					<text class="action-text">充值</text>
				</view>
				<view class="action-btn" @click="showWithdrawModal">
					<image src="/static/svg/minus.svg" class="action-icon" />
					<text class="action-text">提现</text>
				</view>
			</view>
		</view>

		<!-- 积分卡片 -->
		<view class="points-card">
			<view class="points-info">
				<text class="points-title">我的积分</text>
				<text class="points-amount">{{ points }}</text>
			</view>
			<view class="points-actions">
				<text class="points-btn" @click="viewPointsRule">积分规则</text>
				<text class="points-btn" @click="showPointsExchangeModal">积分兑换</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="navigateToTransactions">
				<view class="menu-left">
					<image src="/static/svg/trend-up.svg" class="menu-icon" />
					<text class="menu-title">交易记录</text>
				</view>
				<image src="/static/svg/dropdown.svg" class="arrow-icon" />
			</view>
			
			<view class="menu-item" @click="navigateToBankCards">
				<view class="menu-left">
					<image src="/static/svg/gift.svg" class="menu-icon" />
					<text class="menu-title">银行卡管理</text>
				</view>
				<image src="/static/svg/dropdown.svg" class="arrow-icon" />
			</view>
		</view>

		<!-- 最近交易 -->
		<view class="recent-transactions">
			<view class="section-header">
				<text class="section-title">最近交易</text>
				<text class="view-all" @click="navigateToTransactions">查看全部</text>
			</view>
			
			<view class="transaction-list">
				<view 
					class="transaction-item"
					v-for="transaction in recentTransactions"
					:key="transaction.id"
				>
					<view class="transaction-info">
						<text class="transaction-title">{{ transaction.title }}</text>
						<text class="transaction-time">{{ transaction.time }}</text>
					</view>
					<text class="transaction-amount" :class="transaction.type">
						{{ transaction.type === 'income' ? '+' : '-' }}¥{{ transaction.amount }}
					</text>
				</view>
			</view>
		</view>

		<!-- 充值模态框 -->
		<view class="modal-overlay" v-if="rechargeModalVisible" @click="hideRechargeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">账户充值</text>
					<view class="modal-close" @click="hideRechargeModal">×</view>
				</view>
				<view class="modal-body">
					<view class="amount-options">
						<view 
							class="amount-option"
							v-for="amount in rechargeAmounts"
							:key="amount"
							:class="{ active: selectedRechargeAmount === amount }"
							@click="selectRechargeAmount(amount)"
						>
							¥{{ amount }}
						</view>
					</view>
					<view class="custom-amount">
						<text class="input-label">或输入其他金额</text>
						<input 
							class="amount-input" 
							type="number" 
							placeholder="请输入充值金额"
							v-model="customRechargeAmount"
						/>
					</view>
					<view class="payment-methods">
						<text class="payment-title">支付方式</text>
						<view class="payment-option" @click="selectPaymentMethod('wechat')">
							<view class="payment-left">
								<text class="payment-name">微信支付</text>
							</view>
							<view class="payment-radio" :class="{ active: selectedPayment === 'wechat' }"></view>
						</view>
						<view class="payment-option" @click="selectPaymentMethod('alipay')">
							<view class="payment-left">
								<text class="payment-name">支付宝</text>
							</view>
							<view class="payment-radio" :class="{ active: selectedPayment === 'alipay' }"></view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @click="hideRechargeModal">取消</view>
					<view class="modal-btn confirm" @click="confirmRecharge">确认充值</view>
				</view>
			</view>
		</view>

		<!-- 提现模态框 -->
		<view class="modal-overlay" v-if="withdrawModalVisible" @click="hideWithdrawModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">账户提现</text>
					<view class="modal-close" @click="hideWithdrawModal">×</view>
				</view>
				<view class="modal-body">
					<view class="balance-info">
						<text class="balance-text">可提现余额: ¥{{ balance }}</text>
					</view>
					<view class="withdraw-amount">
						<text class="input-label">提现金额</text>
						<input 
							class="amount-input" 
							type="number" 
							placeholder="请输入提现金额"
							v-model="withdrawAmount"
						/>
					</view>
					<view class="withdraw-tips">
						<text class="tip-text">• 提现将在1-3个工作日内到账</text>
						<text class="tip-text">• 每日提现限额为5000元</text>
						<text class="tip-text">• 单次最低提现金额为10元</text>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @click="hideWithdrawModal">取消</view>
					<view class="modal-btn confirm" @click="confirmWithdraw">确认提现</view>
				</view>
			</view>
		</view>

		<!-- 积分兑换模态框 -->
		<view class="modal-overlay" v-if="pointsExchangeModalVisible" @click="hidePointsExchangeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">积分兑换</text>
					<view class="modal-close" @click="hidePointsExchangeModal">×</view>
				</view>
				<view class="modal-body">
					<view class="points-info-detail">
						<text class="points-text">当前积分: {{ points }}</text>
						<text class="exchange-rate">兑换比例: 100积分 = 1元</text>
					</view>
					<view class="exchange-amount">
						<text class="input-label">兑换积分数量</text>
						<input 
							class="amount-input" 
							type="number" 
							placeholder="请输入兑换积分数量"
							v-model="exchangePoints"
						/>
						<text class="exchange-result" v-if="exchangePoints">
							可兑换金额: ¥{{ (exchangePoints / 100).toFixed(2) }}
						</text>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @click="hidePointsExchangeModal">取消</view>
					<view class="modal-btn confirm" @click="confirmPointsExchange">确认兑换</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 账户余额
const balance = ref('128.50');

// 积分
const points = ref('2,580');

// 最近交易记录
const recentTransactions = ref([
	{
		id: 1,
		title: '活动报名费',
		time: '今天 14:30',
		amount: '50.00',
		type: 'expense'
	},
	{
		id: 2,
		title: '积分兑换',
		time: '昨天 16:20',
		amount: '20.00',
		type: 'income'
	},
	{
		id: 3,
		title: '活动退款',
		time: '2天前',
		amount: '80.00',
		type: 'income'
	}
]);

// 充值相关
const rechargeModalVisible = ref(false);
const rechargeAmounts = ref([10, 20, 50, 100, 200, 500]);
const selectedRechargeAmount = ref(null);
const customRechargeAmount = ref('');
const selectedPayment = ref('wechat');

// 提现相关
const withdrawModalVisible = ref(false);
const withdrawAmount = ref('');

// 积分兑换相关
const pointsExchangeModalVisible = ref(false);
const exchangePoints = ref('');

// 显示充值模态框
const showRechargeModal = () => {
	rechargeModalVisible.value = true;
	selectedRechargeAmount.value = null;
	customRechargeAmount.value = '';
};

// 隐藏充值模态框
const hideRechargeModal = () => {
	rechargeModalVisible.value = false;
};

// 选择充值金额
const selectRechargeAmount = (amount) => {
	selectedRechargeAmount.value = amount;
	customRechargeAmount.value = '';
};

// 选择支付方式
const selectPaymentMethod = (method) => {
	selectedPayment.value = method;
};

// 确认充值
const confirmRecharge = () => {
	const amount = selectedRechargeAmount.value || customRechargeAmount.value;
	if (!amount || amount <= 0) {
		uni.showToast({
			title: '请选择或输入充值金额',
			icon: 'none'
		});
		return;
	}
	
	uni.showModal({
		title: '确认充值',
		content: `确认充值 ¥${amount} 吗？`,
		success: (res) => {
			if (res.confirm) {
				// 这里调用充值API
				uni.showToast({
					title: '充值成功',
					icon: 'success'
				});
				hideRechargeModal();
				// 更新余额
				const currentBalance = parseFloat(balance.value);
				balance.value = (currentBalance + parseFloat(amount)).toFixed(2);
			}
		}
	});
};

// 显示提现模态框
const showWithdrawModal = () => {
	withdrawModalVisible.value = true;
	withdrawAmount.value = '';
};

// 隐藏提现模态框
const hideWithdrawModal = () => {
	withdrawModalVisible.value = false;
};

// 确认提现
const confirmWithdraw = () => {
	const amount = withdrawAmount.value;
	if (!amount || amount <= 0) {
		uni.showToast({
			title: '请输入提现金额',
			icon: 'none'
		});
		return;
	}
	
	if (parseFloat(amount) > parseFloat(balance.value)) {
		uni.showToast({
			title: '提现金额不能超过余额',
			icon: 'none'
		});
		return;
	}
	
	if (parseFloat(amount) < 10) {
		uni.showToast({
			title: '单次最低提现金额为10元',
			icon: 'none'
		});
		return;
	}
	
	uni.showModal({
		title: '确认提现',
		content: `确认提现 ¥${amount} 吗？`,
		success: (res) => {
			if (res.confirm) {
				// 这里调用提现API
				uni.showToast({
					title: '提现申请已提交',
					icon: 'success'
				});
				hideWithdrawModal();
				// 更新余额
				const currentBalance = parseFloat(balance.value);
				balance.value = (currentBalance - parseFloat(amount)).toFixed(2);
			}
		}
	});
};

// 积分规则
const viewPointsRule = () => {
	uni.showModal({
		title: '积分规则',
		content: '1. 每日签到获得10积分\n2. 发布活动获得50积分\n3. 参与活动获得20积分\n4. 100积分=1元\n5. 积分可兑换现金或优惠券',
		showCancel: false
	});
};

// 显示积分兑换模态框
const showPointsExchangeModal = () => {
	pointsExchangeModalVisible.value = true;
	exchangePoints.value = '';
};

// 隐藏积分兑换模态框
const hidePointsExchangeModal = () => {
	pointsExchangeModalVisible.value = false;
};

// 确认积分兑换
const confirmPointsExchange = () => {
	const points = exchangePoints.value;
	if (!points || points <= 0) {
		uni.showToast({
			title: '请输入兑换积分数量',
			icon: 'none'
		});
		return;
	}
	
	if (parseInt(points) < 100) {
		uni.showToast({
			title: '最少兑换100积分',
			icon: 'none'
		});
		return;
	}
	
	const currentPoints = parseInt(points.value.replace(',', ''));
	if (parseInt(points) > currentPoints) {
		uni.showToast({
			title: '积分不足',
			icon: 'none'
		});
		return;
	}
	
	const cashAmount = (points / 100).toFixed(2);
	uni.showModal({
		title: '确认兑换',
		content: `确认用 ${points} 积分兑换 ¥${cashAmount} 吗？`,
		success: (res) => {
			if (res.confirm) {
				// 这里调用积分兑换API
				uni.showToast({
					title: '兑换成功',
					icon: 'success'
				});
				hidePointsExchangeModal();
				// 更新积分和余额
				const newPoints = currentPoints - parseInt(points);
				points.value = newPoints.toLocaleString();
				const currentBalance = parseFloat(balance.value);
				balance.value = (currentBalance + parseFloat(cashAmount)).toFixed(2);
			}
		}
	});
};

// 跳转到交易记录页面
const navigateToTransactions = () => {
	uni.navigateTo({
		url: './transactions/index'
	});
};

// 跳转到银行卡管理页面
const navigateToBankCards = () => {
	uni.navigateTo({
		url: './bankcards/index'
	});
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
	padding: 20px;
}

/* 余额卡片 */
.balance-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	padding: 30px 20px;
	color: white;
	margin-bottom: 20px;
}

.balance-title {
	font-size: 16px;
	opacity: 0.9;
	display: block;
	margin-bottom: 10px;
}

.balance-amount {
	display: flex;
	align-items: baseline;
	margin-bottom: 25px;
}

.currency {
	font-size: 20px;
	margin-right: 5px;
}

.amount {
	font-size: 36px;
	font-weight: bold;
}

.balance-actions {
	display: flex;
	gap: 20px;
}

.action-btn {
	flex: 1;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.action-btn:active {
	background: rgba(255, 255, 255, 0.3);
}

.action-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.action-text {
	font-size: 16px;
}

/* 积分卡片 */
.points-card {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.points-info {
	flex: 1;
}

.points-title {
	font-size: 16px;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

.points-amount {
	font-size: 24px;
	font-weight: bold;
	color: #ff6b6b;
	display: block;
}

.points-actions {
	display: flex;
	gap: 15px;
}

.points-btn {
	font-size: 14px;
	color: #667eea;
	padding: 8px 15px;
	border: 1px solid #667eea;
	border-radius: 20px;
}

.points-btn:active {
	background: #667eea;
	color: white;
}

/* 功能菜单 */
.menu-section {
	background: white;
	border-radius: 16px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f8f9fa;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: #f8f9fa;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	width: 24px;
	height: 24px;
	margin-right: 15px;
	filter: opacity(0.7);
}

.menu-title {
	font-size: 16px;
	color: #333;
}

.arrow-icon {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
	filter: opacity(0.4);
}

/* 最近交易 */
.recent-transactions {
	background: white;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.view-all {
	font-size: 14px;
	color: #667eea;
}

.transaction-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.transaction-info {
	flex: 1;
}

.transaction-title {
	font-size: 16px;
	color: #333;
	display: block;
	margin-bottom: 4px;
}

.transaction-time {
	font-size: 12px;
	color: #999;
	display: block;
}

.transaction-amount {
	font-size: 16px;
	font-weight: bold;
}

.transaction-amount.income {
	color: #28a745;
}

.transaction-amount.expense {
	color: #dc3545;
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border-radius: 16px;
	padding: 0;
	width: 80%;
	max-width: 400px;
	max-height: 80vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.modal-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.modal-close {
	font-size: 24px;
	font-weight: bold;
	color: #999;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-body {
	padding: 20px;
}

.amount-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.amount-option {
	font-size: 14px;
	padding: 8px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s;
}

.amount-option.active {
	background: #667eea;
	color: white;
	border-color: #667eea;
}

.custom-amount {
	margin-bottom: 20px;
}

.input-label {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 8px;
}

.amount-input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 16px;
	box-sizing: border-box;
}

.amount-input:focus {
	border-color: #667eea;
	outline: none;
}

.payment-methods {
	margin-bottom: 20px;
}

.payment-title {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 10px;
}

.payment-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all 0.3s;
}

.payment-option:hover {
	border-color: #667eea;
}

.payment-left {
	display: flex;
	align-items: center;
}

.payment-name {
	font-size: 16px;
	color: #333;
}

.payment-radio {
	width: 16px;
	height: 16px;
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	position: relative;
	transition: all 0.3s;
}

.payment-radio.active {
	border-color: #667eea;
}

.payment-radio.active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: #667eea;
	border-radius: 50%;
}

.modal-footer {
	display: flex;
	gap: 10px;
	padding: 20px;
	border-top: 1px solid #f0f0f0;
}

.modal-btn {
	flex: 1;
	font-size: 16px;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
}

.modal-btn.cancel {
	background: #f8f9fa;
	color: #666;
}

.modal-btn.cancel:active {
	background: #e9ecef;
}

.modal-btn.confirm {
	background: #667eea;
	color: white;
}

.modal-btn.confirm:active {
	background: #5a6fd8;
}

.balance-info {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
}

.balance-text {
	font-size: 16px;
	color: #333;
}

.withdraw-amount {
	margin-bottom: 20px;
}

.withdraw-tips {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 8px;
	padding: 15px;
}

.tip-text {
	font-size: 12px;
	color: #856404;
	display: block;
	margin-bottom: 5px;
}

.tip-text:last-child {
	margin-bottom: 0;
}

.points-info-detail {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
}

.points-text {
	font-size: 16px;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.exchange-rate {
	font-size: 12px;
	color: #999;
	display: block;
}

.exchange-amount {
	margin-bottom: 20px;
}

.exchange-result {
	font-size: 14px;
	font-weight: bold;
	color: #28a745;
	display: block;
	margin-top: 10px;
	padding: 10px;
	background: #d4edda;
	border-radius: 6px;
}
</style> 